<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id='app'>
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="title" label="场景" width="180">
                </el-table-column>
                <el-table-column prop="name" label="场景编号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="操作">
                    <template slot-scope="scope">
                        <a :href="['/story/info?name='+scope.row.name]">编辑</a>
                        <el-button type="primary" @click="onDelete(name)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <a href='/story/info'>创建</a>
        </template>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
    <script src="/story/utils.js"></script>
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                keyword: '',
                tableData: JSON.parse('${items!""}')
            }
        },
        mounted: function() {
            // var str = '${items!}'

        },
        methods: {
            onDelete(name) {
                var param = {
                    name: name
                }
                axiosRequest(param, '/story/delete', "")
            },
            addReply() {
                this.form.toScene.push({});
            },
            removeReply(index) {
                this.form.toScene.splice(index, 1);
            },
            addConversation() {
                this.form.conversations.push('');
            },
            removeConversations(index) {
                this.form.conversations.splice(index, 1);
            },
            onPageChange(val) {},
            onSubmit() {
                console.log(this.form)
                var param = {
                    json: JSON.stringify(this.form),
                    name: this.form.name
                }
                axiosRequest(param, '/story/submit', "/story/info")
            }
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
    <script>
    console.log('${items!}')
    // vue.tableData = ${items!};
    </script>
</body>

</html>